<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仪表盘</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="dashboard">
        <!-- 侧边栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h1>Dashboard</h1>
            </div>
            <nav class="sidebar-nav">
                <a href="#" class="nav-item active">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
                    </svg>
                    <span>仪表盘</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2v8H2v-8h2v6h16zM10 18H4v-4h6v4zm0-6H4V8h6v4zm0-6H4V2h6v4zm10 4h-6V8h6v4zm0-6H14V2h6v4z"></path>
                    </svg>
                    <span>数据管理</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path>
                    </svg>
                    <span>用户中心</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" d="M20 2H4c-1.11 0-1.99.89-1.99 2L2 22l4-4h14c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 14H6l-2 2V4h16v12z"></path>
                    </svg>
                    <span>消息通知</span>
                </a>
                <a href="#" class="nav-item">
                    <svg viewBox="0 0 24 24" width="20" height="20">
                        <path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"></path>
                    </svg>
                    <span>设置</span>
                </a>
            </nav>
            <div class="sidebar-footer">
                <div class="user-info">
                    <img src="https://picsum.photos/40/40?random=1" alt="用户头像" class="user-avatar">
                    <div class="user-details">
                        <div class="user-name">管理员</div>
                        <div class="user-role">系统管理员</div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 顶部导航 -->
            <header class="main-header">
                <div class="header-left">
                    <button class="menu-toggle" id="menuToggle">
                        <svg viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
                        </svg>
                    </button>
                    <div class="search-box">
                        <input type="text" placeholder="搜索..." class="search-input">
                        <button class="search-btn">
                            <svg viewBox="0 0 24 24" width="20" height="20">
                                <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                            </svg>
                        </button>
                    </div>
                </div>
                <div class="header-right">
                    <button class="notifications-btn" id="notificationsBtn">
                        <svg viewBox="0 0 24 24" width="20" height="20">
                            <path fill="currentColor" d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"></path>
                        </svg>
                        <span class="notification-badge">3</span>
                    </button>
                    <button class="settings-btn">
                        <svg viewBox="0 0 24 24" width="20" height="20">
                            <path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"></path>
                        </svg>
                    </button>
                </div>
            </header>

            <!-- 页面标题 -->
            <div class="page-header">
                <h1>仪表盘概览</h1>
                <p>欢迎回来，这是您的系统数据概览</p>
            </div>

            <!-- 统计卡片网格 -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon primary">
                        <svg viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M11 18c0 1.1.9 2 2 2s2-.9 2-2-.9-2-2-2-2 .9-2 2zm-8-7c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7A6.98 6.98 0 0 1 3 11zm14 0c0 2.76-2.24 5-5 5s-5-2.24-5-5 2.24-5 5-5 5 2.24 5 5z"></path>
                        </svg>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">¥12,580</div>
                        <div class="stat-label">总收入</div>
                        <div class="stat-change positive">+8.2%</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon secondary">
                        <svg viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14zM4 7V5h2v2H4zm0 4V9h2v2H4zm0 4v-2h2v2H4zm0 4v-2h2v2H4z"></path>
                        </svg>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">1,245</div>
                        <div class="stat-label">订单数量</div>
                        <div class="stat-change positive">+12.5%</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon success">
                        <svg viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path>
                        </svg>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">3,842</div>
                        <div class="stat-label">用户总数</div>
                        <div class="stat-change positive">+4.8%</div>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-icon danger">
                        <svg viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor" d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
                        </svg>
                    </div>
                    <div class="stat-content">
                        <div class="stat-value">96.8%</div>
                        <div class="stat-label">完成率</div>
                        <div class="stat-change negative">-1.2%</div>
                    </div>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="charts-section">
                <div class="chart-card">
                    <div class="chart-header">
                        <h3>销售趋势</h3>
                        <div class="chart-controls">
                            <button class="chart-period-btn active">日</button>
                            <button class="chart-period-btn">周</button>
                            <button class="chart-period-btn">月</button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="salesChart" height="250"></canvas>
                    </div>
                </div>
                <div class="chart-card">
                    <div class="chart-header">
                        <h3>用户分布</h3>
                        <div class="chart-controls">
                            <button class="chart-filter-btn">按地区</button>
                        </div>
                    </div>
                    <div class="chart-container">
                        <canvas id="userDistributionChart" height="250"></canvas>
                    </div>
                </div>
            </div>

            <!-- 最近活动和通知 -->
            <div class="dashboard-grid">
                <!-- 最近活动 -->
                <div class="activity-card">
                    <div class="card-header">
                        <h3>最近活动</h3>
                        <a href="#" class="view-all">查看全部</a>
                    </div>
                    <div class="activity-list" id="activityList">
                        <div class="activity-item">
                            <div class="activity-icon success">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                                </svg>
                            </div>
                            <div class="activity-content">
                                <div class="activity-text">订单 #1234 已完成支付</div>
                                <div class="activity-time">10分钟前</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon info">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
                                </svg>
                            </div>
                            <div class="activity-content">
                                <div class="activity-text">新用户 张三 已注册</div>
                                <div class="activity-time">25分钟前</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon warning">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>
                                </svg>
                            </div>
                            <div class="activity-content">
                                <div class="activity-text">服务器存储空间不足</div>
                                <div class="activity-time">1小时前</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon success">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
                                </svg>
                            </div>
                            <div class="activity-content">
                                <div class="activity-text">系统备份已完成</div>
                                <div class="activity-time">3小时前</div>
                            </div>
                        </div>
                        <div class="activity-item">
                            <div class="activity-icon danger">
                                <svg viewBox="0 0 24 24" width="16" height="16">
                                    <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path>
                                </svg>
                            </div>
                            <div class="activity-content">
                                <div class="activity-text">订单 #1233 支付失败</div>
                                <div class="activity-time">5小时前</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 通知面板 -->
                <div class="notifications-card">
                    <div class="card-header">
                        <h3>通知</h3>
                        <button class="mark-all-read">全部标为已读</button>
                    </div>
                    <div class="notifications-list" id="notificationsList">
                        <div class="notification-item unread">
                            <div class="notification-dot"></div>
                            <div class="notification-content">
                                <div class="notification-text">系统将于今晚23:00进行维护</div>
                                <div class="notification-time">刚刚</div>
                            </div>
                        </div>
                        <div class="notification-item unread">
                            <div class="notification-dot"></div>
                            <div class="notification-content">
                                <div class="notification-text">您有5条新消息</div>
                                <div class="notification-time">2小时前</div>
                            </div>
                        </div>
                        <div class="notification-item">
                            <div class="notification-content">
                                <div class="notification-text">新版本更新已可用</div>
                                <div class="notification-time">昨天</div>
                            </div>
                        </div>
                        <div class="notification-item">
                            <div class="notification-content">
                                <div class="notification-text">月度报表已生成</div>
                                <div class="notification-time">2天前</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设置面板 -->
            <div class="settings-panel">
                <div class="card-header">
                    <h3>仪表盘设置</h3>
                </div>
                <div class="settings-content">
                    <div class="setting-group">
                        <h4>显示选项</h4>
                        <div class="setting-item">
                            <label for="showStats">显示统计卡片</label>
                            <input type="checkbox" id="showStats" checked>
                        </div>
                        <div class="setting-item">
                            <label for="showCharts">显示图表</label>
                            <input type="checkbox" id="showCharts" checked>
                        </div>
                        <div class="setting-item">
                            <label for="showActivity">显示最近活动</label>
                            <input type="checkbox" id="showActivity" checked>
                        </div>
                    </div>
                    <div class="setting-group">
                        <h4>刷新设置</h4>
                        <div class="setting-item">
                            <label for="refreshInterval">自动刷新间隔</label>
                            <select id="refreshInterval">
                                <option value="30">30秒</option>
                                <option value="60" selected>1分钟</option>
                                <option value="300">5分钟</option>
                                <option value="600">10分钟</option>
                                <option value="0">手动</option>
                            </select>
                        </div>
                    </div>
                    <div class="setting-group">
                        <h4>主题设置</h4>
                        <div class="setting-item">
                            <label>主题模式</label>
                            <div class="theme-options">
                                <button class="theme-btn light active" data-theme="light">浅色</button>
                                <button class="theme-btn dark" data-theme="dark">深色</button>
                                <button class="theme-btn auto" data-theme="auto">跟随系统</button>
                            </div>
                        </div>
                    </div>
                    <button class="save-settings-btn">保存设置</button>
                </div>
            </div>
        </main>
    </div>

    <!-- 通知侧边栏 -->
    <div class="notifications-sidebar" id="notificationsSidebar">
        <div class="sidebar-header">
            <h3>通知中心</h3>
            <button class="close-sidebar" id="closeNotificationsSidebar">×</button>
        </div>
        <div class="sidebar-content">
            <!-- 通知内容将通过JavaScript动态生成 -->
        </div>
    </div>

    <!-- 侧边栏遮罩 -->
    <div class="sidebar-overlay" id="sidebarOverlay"></div>

    <script src="script.js"></script>
</body>
</html>